<template>
  <div class="quaJu">
    <div class="head">
      <div class="leftPart">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-form
              ref="form"
              :inline="true"
              :model="formUser"
              label-width="80px"
            >
              <el-form-item class="Index">
                <el-input
                  v-model="formUser.nameUser1"
                  placeholder="输入关键字查找"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="listDatesLeave1"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="text item">
            <el-button type="primary" icon="el-icon-plus" @click="addition1"
              >添加一级分类</el-button
            >
            <el-table
              :data="tableData1"
              ref="tableData1Ref"
              height="250"
              border
              style="width: 100%"
              :show-header="false"
              class="coUser"
              highlight-current-row
              @current-change="handleLeave1Change"
            >
              <el-table-column prop="name" align="center" id="cursorType">
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit1(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete1(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="leftPart">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-form
              ref="form"
              :inline="true"
              :model="formUser"
              label-width="80px"
            >
              <el-form-item class="Index">
                <el-input
                  v-model="formUser.nameUser2"
                  placeholder="输入关键字查找"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="listDatesLeave2"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="text item">
            <el-button type="primary" icon="el-icon-plus" @click="addition2"
              >添加二级分类</el-button
            >
            <el-table
              :data="tableData2"
              ref="tableData2Ref"
              height="250"
              border
              style="width: 100%"
              :show-header="false"
              class="coUser"
              highlight-current-row
              @current-change="handleLeave2Change"
            >
              <el-table-column
                prop="name"
                align="center"
                class="hyy"
                id="cursorType"
              >
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit2(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete2(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="rightSection">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-form
              ref="form"
              :inline="true"
              :model="formUser"
              label-width="80px"
            >
              <el-form-item class="Index">
                <el-input
                  v-model="formUser.nameUser3"
                  placeholder="输入关键字查找"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="listDatesLeave3"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="text item">
            <el-button type="primary" icon="el-icon-plus" @click="addition3"
              >添加三级分类</el-button
            >
            <el-table
              :data="tableData3"
              height="250"
              border
              style="width: 100%"
              :show-header="false"
              class="coUser"
            >
              <el-table-column
                prop="name"
                align="center"
                width="130"
                id="cursorType"
              >
              </el-table-column>
              <el-table-column align="center" class="hyy">
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    size="mini"
                    @click="brand(scope.$index, scope.row)"
                    >品牌</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit3(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete3(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            ref="form"
            :rules="rules"
            :model="formIndex"
            label-width="80px"
          >
            <el-form-item prop="name" label="分类名称">
              <el-input
                v-model="formIndex.name"
                :disabled="disabled1"
              ></el-input>
            </el-form-item>
            <el-form-item label="分类图片" prop="imageUrl">
              <div class="unlodBox">
                <el-upload
                  class="upload-demo"
                  action
                  :http-request="uploadFiles"
                  ref="upload"
                  :limit="fileLimit"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload"
                  :show-file-list="false"
                  :headers="headers"
                  :on-change="fileChange"
                >
                  <el-image
                    v-if="formIndex.imageUrl"
                    class="imageGood"
                    :src="formIndex.imageUrl"
                    style="width: 360px; height: 180px"
                  ></el-image>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过5M
                  </div>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item prop="sort" label="分类排序">
              <el-input v-model="formIndex.sort"></el-input>
            </el-form-item>
            <el-form-item label="是否展示" prop="visibility">
              <el-switch
                v-model="formIndex.visibility"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
                @change="switchChange(formIndex.visibility)"
              >
              </el-switch>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="VisibleUser">取 消</el-button>
          <el-button type="primary" @click="dialogUser">保 存</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="品牌"
        :visible.sync="dialogDate"
        width="40%"
        :before-close="handleIndex"
      >
        <span>
          <el-form ref="form" :model="brandForm" label-width="110px">
            <el-form-item label="一级分类名称" class="userList">
              <el-input :disabled="true" v-model="brandForm.name1"></el-input>
            </el-form-item>
            <el-form-item label="二级分类名称" class="userList">
              <el-input :disabled="true" v-model="brandForm.name2"></el-input>
            </el-form-item>
            <el-form-item label="三级分类名称" class="userList">
              <el-input :disabled="true" v-model="brandForm.name3"></el-input>
            </el-form-item>
            <el-form-item label="品牌名称" class="userList">
              <el-input
                @blur="triggerInput"
                v-model="brandForm.brand"
                @change="search"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="selectList"
                multiple
                placeholder="请选择"
                @focus="setMinWidth"
                style="width: 60%"
                @clear="dateIndexUser"
                @remove-tag="removeTag"
                ref="articleOrgRef"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :style="{ width: Width + 'px' }"
                  @click.native="optionUnitclick(item.name)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品牌">
              <div class="herDist">
                <el-tag
                  class="userIndex"
                  v-for="(item, index) in selectDate"
                  :key="index"
                  >{{ item }}</el-tag
                >
              </div>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogIndex">确 定 添 加</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  Category,
  uploadFiles,
  listDate,
  redactEdit,
  deleteDate,
  bindBrand,
  branDate,
  binding,
} from "../../../../utils/api";
import { compressImage } from "../../../../assets/js/compressImage";
export default {
  data() {
    return {
      page: 1,
      value: "",
      dialogDate: false,
      dialogVisible: false,
      disabled1: false,
      token: sessionStorage.getItem("token"),
      parent_id: "",
      //判断变量
      deleteId: "",
      dateUserIndex: 1,
      estimate: 1,
      pageSize: 0,
      type: 2,
      leave1ParentId: 0,
      leave2ParentId: 0,
      leave3ParentId: 0,
      formUser: {
        nameUser1: "", //一级搜索
        nameUser2: "", //二级搜索
        nameUser3: "", //三级搜索
      },
      //一级展示
      tableData1: [
        {
          name: "",
          id: "",
          visibility: "",
          image: "",
          img: "",
        },
      ],
      //二级展示
      tableData2: [
        {
          name: "",
          id: "",
          visibility: "",
          image: "",
          img: "",
        },
      ],
      //三级展示
      tableData3: [
        {
          name: "",
          id: "",
          visibility: "",
          image: "",
          img: "",
        },
      ],
      //品牌展示数据
      brandForm: {
        name1: "",
        name2: "",
        name3: "",
        brand: "",
      },
      Width: "",
      //品牌下拉展示数据
      options: [],
      //品牌收集数据
      selectList: [],
      selectDate: [],
      //收集数据
      formIndex: {
        id: "",
        name: "",
        imageUrl: "",
        imageUrl1: "",
        visibility: "",
        sort: "",
      },
      imgHeader: this.Global.imgHeader,

      //上传
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      fileLimit: 1,
      headers: { "Content-Type": "multipart/form-data" },
      srcList2: {},
      //校验
      rules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        // imageUrl: [
        //   { required: true, message: '请上传品牌图片', trigger: 'blur' },
        // ],
        visibility: [
          { required: true, message: "请选择是否上下架", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入商品的排序", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^\d+$/.test(value) == false) {
                callback(new Error("请输入不小于0的整数"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    setMinWidth(val) {
      this.Width = val.srcElement.clientWidth;
    },
    //清空数据
    dateIndex() {
      (this.formIndex.name = ""),
        (this.formIndex.id = ""),
        (this.formIndex.imageUrl = ""),
        (this.formIndex.imageUrl1 = ""),
        (this.formIndex.visibility = ""),
        (this.formIndex.sort = "");
    },
    dateIndexUser() {
      this.selectList = [];
      this.selectDate = [];
      this.brandForm.brand = "";
    },
    //一级编辑
    handleEdit1(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      console.log(obj);
      (this.formIndex.name = obj.name), (this.formIndex.imageUrl = obj.img);
      this.formIndex.imageUrl1 = obj.image;
      (this.formIndex.visibility = obj.visibility),
        (this.formIndex.sort = obj.sort);
      this.parent_id = obj.parent_id;
      this.formIndex.id = obj.id;
      this.dialogVisible = true;
      this.disabled1 = true;
    },
    //一级删除
    handleDelete1(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.estimate = 1;
      this.deleteId = obj.id;
      this.deleteDates();
    },
    //二级编辑
    handleEdit2(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      console.log(obj);
      (this.formIndex.name = obj.name), (this.formIndex.imageUrl = obj.img);
      this.formIndex.imageUrl1 = obj.image;
      (this.formIndex.visibility = obj.visibility),
        (this.formIndex.sort = obj.sort);
      this.parent_id = obj.parent_id;
      this.formIndex.id = obj.id;
      this.dialogVisible = true;
      this.disabled1 = false;
    },
    //二级删除
    handleDelete2(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      console.log(obj);
      this.estimate = 2;
      this.deleteId = obj.id;
      this.deleteDates();
    },
    //三级编辑
    handleEdit3(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      (this.formIndex.name = obj.name), (this.formIndex.imageUrl = obj.img);
      this.formIndex.imageUrl1 = obj.image;
      (this.formIndex.visibility = obj.visibility),
        (this.formIndex.sort = obj.sort);
      this.parent_id = obj.parent_id;
      this.formIndex.id = obj.id;
      this.dialogVisible = true;
      this.disabled1 = false;
    },
    //三级删除
    handleDelete3(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.estimate = 3;
      this.deleteId = obj.id;
      this.deleteDates();
    },

    // 添加一级分类
    addition1() {
      this.dialogVisible = true;
      this.dateUserIndex = 1;
    },
    addition2() {
      this.dialogVisible = true;
      this.dateUserIndex = 2;
    },
    addition3() {
      this.dialogVisible = true;
      this.dateUserIndex = 3;
    },
    //保存
    dialogUser() {
      if (this.formIndex.id) {
        this.redactEdits();
        this.dialogVisible = false;
      } else {
        if (this.dateUserIndex == 1) {
          this.CateGory(this.leave1ParentId);
          let timer = setTimeout(() => {
            //需要定时执行的代码
            this.listDatesLeave1();
          }, 1000);
        }
        if (this.dateUserIndex == 2) {
          this.CateGory(this.leave2ParentId);
          let timer = setTimeout(() => {
            //需要定时执行的代码
            this.listDatesLeave2();
          }, 2000);
        }
        if (this.dateUserIndex == 3) {
          this.CateGory(this.leave3ParentId);
          let timer = setTimeout(() => {
            this.listDatesLeave3();
          }, 2000);
        }

        this.dialogVisible = false;
      }
    },
    //取消
    VisibleUser() {
      this.dialogVisible = false;
      this.dateIndex();
    },
    //添加品牌
    dialogIndex() {
      this.bindings();
    },
    handleIndex(done) {
      this.dateIndexUser();
      done();
    },
    //品牌
    brand(index, row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.tableData3.id = obj.id;
      this.bindBrands();
      this.branDates();
      this.dialogDate = true;
    },
    //关闭1
    handleClose(done) {
      done();
      this.dateIndex();
    },
    //品牌查询
    triggerInput() {
      this.branDates();
    },
    //下拉自动展示
    search() {
      this.$refs.articleOrgRef.toggleMenu();
    },
    //单选一级分类
    handleLeave1Change(val) {
      let obj = JSON.parse(JSON.stringify(val));
      this.leave2ParentId = obj.id;
      this.listDatesLeave2();
    },
    //单选二级分类
    handleLeave2Change(val) {
      if (val) {
        let obj = JSON.parse(JSON.stringify(val));
        this.leave3ParentId = obj.id;
        this.listDatesLeave3();
      }
    },

    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    handleRemove() {},
    //这是我自定义的移除事件
    handleClosedelete(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    //上传文件的格式
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 压缩文件
    compressFile() {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      this.fileList.forEach(async (item) => {
        // console.log("this.fileList1", this.fileList1);
        console.log("原图size1===>", item.size);
        let result = await compressImage({
          file: item.raw,
          config,
          fileName: item.name,
        });
        console.log("压缩后图片size1===>", result.finalFile.size);
        // this.imageList.push(result);
        this.srcList2 = result.finalFile;
        // console.log("aaa", result.finalFile);
        // console.log("bbb", this.srcList2);
        // console.log("this.srcList", this.srcList);
      });
      // console.log("压缩后图片1===>", this.imageList);
    },
    //上传文件的事件
    uploadFiles(item) {
      this.$message("文件上传中........");
      //上传文件的需要formdata类型;所以要转
      this.compressFile();
      let timer = setTimeout(() => {
        uploadFiles(this.srcList2).then((res) => {
          if (res.data.status != false || res.data.id != null) {
            res.data.data.saveurl; //半截
            res.data.data.weburl; //全拼
            this.img = res.data.data.weburl;
            this.formIndex.imageUrl1 = res.data.data.saveurl;
            this.formIndex.imageUrl = res.data.data.weburl;
            this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
            let i = this.fileList.indexOf(this.srcList2);
            this.handleSuccess();
          }
        });
        clearTimeout(timer);
      }, 1000);
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.img = res.data.data.weburl;
      //     this.formIndex.imageUrl1 = res.data.data.saveurl;
      //     this.formIndex.imageUrl = res.data.data.weburl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClosedelete();
    },
    //上下架
    switchChange(e) {},
    //添加分类
    CateGory(parentId) {
      Category(
        this.token,
        this.formIndex.name,
        this.formIndex.sort,
        this.formIndex.visibility,
        this.formIndex.imageUrl1,
        parentId
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.dateIndex();
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
            let timer = setTimeout(() => {
              this.$message.error("错误，请刷新");
            }, 5000);
          }
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取一级列表数据
    listDatesLeave1() {
      this.loading = true;
      listDate(
        this.token,
        this.pageSize,
        this.formUser.nameUser1,
        this.leave1ParentId,
        this.page
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData1 = res.data.data;
            this.tableData2 = [];
            this.tableData3 = [];
            this.formUser.nameUser2 = "";
            this.formUser.nameUser3 = "";
            if (this.tableData1.length > 0) {
              this.$refs.tableData1Ref.setCurrentRow(this.tableData1[0]);
              this.leave2ParentId = this.tableData1[0].id;
              this.listDatesLeave2();
            }
            this.tableData1.forEach((item) => {
              if (item.img) {
                item.image = item.img;
                item.img = this.imgHeader + item.img;
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //获取二级列表数据
    listDatesLeave2() {
      this.loading = true;
      listDate(
        this.token,
        this.pageSize,
        this.formUser.nameUser2,
        this.leave2ParentId,
        this.page
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData2 = res.data.data;
            this.tableData3 = [];
            this.formUser.nameUser3 = "";
            if (this.tableData2.length > 0) {
              this.$refs.tableData2Ref.setCurrentRow(this.tableData2[0]);
              this.leave3ParentId = this.tableData2[0].id;
              this.listDatesLeave3();
            }
            this.tableData2.forEach((item) => {
              if (item.img) {
                item.image = item.img;
                item.img = this.imgHeader + item.img;
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //获取三级级列表数据
    listDatesLeave3() {
      this.loading = true;
      listDate(
        this.token,
        this.pageSize,
        this.formUser.nameUser3,
        this.leave3ParentId,
        this.page
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData3 = res.data.data;
            this.tableData3.forEach((item) => {
              if (item.img) {
                item.image = item.img;
                item.img = this.imgHeader + item.img;
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //编辑
    redactEdits() {
      redactEdit(
        this.token,
        this.formIndex.id,
        this.formIndex.name,
        this.formIndex.sort,
        this.formIndex.visibility,
        this.formIndex.imageUrl1,
        this.parent_id
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "修改成功",
            type: "success",

            onClose: (res) => {},
          });
          if (this.dateUserIndex == 1) {
            this.listDatesLeave1();
          }
          if (this.dateUserIndex == 2) {
            this.listDatesLeave2();
          }
          if (this.dateUserIndex == 3) {
            this.listDatesLeave3();
          }
          this.dialogVisible = false;
          this.dateIndex();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //删除
    deleteDates() {
      if (this.estimate == 1) {
        if (this.tableData2.length != 0) {
          this.$message({
            message: "请先清空当前分类的二级以及三级分类列表的数据",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              deleteDate(this.token, this.deleteId).then((res) => {
                if (res.data.status) {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  this.listDatesLeave1();
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      }
      if (this.estimate == 2) {
        if (this.tableData3.length != 0) {
          this.$message({
            message: "请先清空当前分类的三级分类列表的数据",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              deleteDate(this.token, this.deleteId).then((res) => {
                if (res.data.status) {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  this.listDatesLeave2();
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      }
      if (this.estimate == 3) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteDate(this.token, this.deleteId).then((res) => {
              if (res.data.status) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.listDatesLeave3();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //品牌列表
    bindBrands() {
      this.loading = true;
      bindBrand(this.tableData3.id, this.token)
        .then((res) => {
          if (res.data.status) {
            this.brandForm.name2 = res.data.data.child_name;
            this.brandForm.name1 = res.data.data.parent_name;
            this.brandForm.name3 = res.data.data.son_name;
            let resUSer = res.data.data.brand_list;
            resUSer.forEach((item) => {
              this.selectList.push(item.get_brand.id);
              this.selectDate.push(item.get_brand.name);
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //搜索品牌
    branDates() {
      this.loading = true;
      branDate(this.token, this.type, this.brandForm.brand)
        .then((res) => {
          if (res.data.status) {
            this.options = res.data.data;
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    removeTag(date) {
      const selectedArr = this.$refs.articleOrgRef.selected;
      this.selectDate = [];
      selectedArr.forEach((item) => {
        if (item.value != date) {
          this.selectDate.push(item.label);
        }
      });
    },
    optionUnitclick(date) {
      const index = this.selectDate.indexOf(date);
      if (index < 0) {
        this.selectDate.push(date);
      } else {
        this.$delete(this.selectDate, index);
      }
    },
    //绑定
    bindings() {
      binding(this.token, this.tableData3.id, this.selectList).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.dialogDate = false;
          this.dateIndexUser();
          this.listDatesLeave3();
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
            let timer = setTimeout(() => {
              this.$message.error("错误，请刷新");
            }, 5000);
          }
          this.$message.error(res.data.msg);
        }
      });
    },
  },
  async mounted() {
    await this.listDatesLeave1();
  },
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.el-select-dropdown__item {
  overflow: visible;
}

.leftPart {
  height: 100%;
  width: 31%;
  margin-right: 3%;
}

.hyy {
  height: 100px;
  overflow: auto;
}
.quaJu {
  width: 100%;
  height: 100%;
  display: flex;
}
.rightSection {
  height: 100%;
  width: 30%;
}

.coUser {
  margin-top: 20px;
}

.text {
  font-size: 14px;
}

.Index {
  margin-right: 30px;
}

.userIndex {
  margin: 10px 10px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.herDist {
  height: 300px;
  width: 80%;
  border: 1px solid #1a171711;
  overflow: auto;
}

.userList {
  width: 500px;
}
.text #cursorType {
  cursor: pointer;
}
</style>
